import React, { useState,useRef } from 'react';
import { Stpdiv } from './PubStyled'

const Step = (props) => {
    
    let inpt = useRef(null)
    let [num, setNum] = useState({ num: 0 })
    return (
        <Stpdiv>
            <span className='yo-ico'
                onClick={() => {
                    if (num.num === 0) return
                    setNum({ num: Number(num.num) - 1 })
                    inpt.current.value = num.num -1
            }}>&#xe615;</span >
                <input type="text" defaultValue={0} ref = { inpt } onInput={(e)=>setNum({num:e.target.value})}/>
            <span className='yo-ico'
                onClick={() => {
                    setNum({ num: Number(num.num) + 1 })
                    inpt.current.value = num.num + 1
                }
            }>&#xe620;</span>
        </Stpdiv>
    );
}

export default Step;